<template>
    <div class="radiobuttonBox">
        <div
            class="radiobuttonItem"
            :class="props.disabled ? 'notselect' : ''"
            :style="{
                width: `${props.width}px`,
                background: modelValue == item.value ? '#299c37' : '#f1f1f1 !important',
                color: modelValue == item.value ? '#ffffff !important' : '#606266',
            }"
            v-for="(item, index) in props.data"
            :key="index"
            @click="selectradiobuttonItem(item.value)"
        >
            {{ item.label }}
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, reactive } from "vue";
interface Props {
    data?: any;
    width?: string;
    modelValue?: any;
    disabled?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
    data: [],
    width: "240",
    modelValue: "",
    disabled: false, // true禁止选择
});
const propsData = reactive(props);
const emit = defineEmits(["update:modelValue"]);
const selectradiobuttonItem = (value: any) => {
    if (!props.disabled) {
        emit("update:modelValue", value);
    }
};
</script>
<style scoped lang="scss">
.radiobuttonBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.radiobuttonItem {
    line-height: 32px;
    text-align: center;
    padding: 0;
    width: 240px;
    height: 32px;
    background: #f1f1f1;
    border: 1px solid #cccccc;
    color: #606266;
    border-radius: 5px;
    margin-right: 20px;
    cursor: pointer;
    &:hover {
        color: #299c37 !important;
    }
}
.notselect {
    cursor: not-allowed;
    background: #91d8a6 !important;
    &:hover {
        color: #606266 !important;
    }
}
</style>
